<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>用户注册页面</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/login.css" />
</head>

<body>
  <div class="login-box">
    <form>
      <div class="form-group mb-3">
        <label for="username">用户名</label>
        <!-- 账号 -->
        <input type="text" class="form-control" name="username" id="username" autocomplete="off" />
        <small id="emailHelp" class="form-text text-muted">用户名长度2~15位</small>
      </div>
      <div class="form-group mb-3">
        <!-- 密码 -->
        <label for="password">密码</label>
        <input type="password" class="form-control" name="password" id="password" />
        <small id="emailHelp" class="form-text text-muted">密码长度6~15位</small>
      </div>
      <button type="submit" class="btn btn-primary mb-3" id="btnLogin">注册</button>
      <div class="form-group mb-3">
        <a href="./login.html" style="color: #6c757d">已有账号，去登录</a>
      </div>
    </form>
  </div>

  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <script src="./lib/request.js"></script>

  <script>
    // 代码比较少，直接写到当前文件了
    // 点击 注册 按钮的时候，阻止默认行为 --> 收集表达中的数据 --> 提交给接口
    document.querySelector('#btnLogin').addEventListener('click', async function (e) {
      e.preventDefault()
      // 获取表达数据（使用插件提供的val方法）
      // const data = val(表单) // 输入框必须有name属性
      const data = val(document.querySelector('form'))
      const { data: res } = await axios.post('/api/register', data)
      // console.log(res)
      if (res.status === 0) {
        document.querySelector('form').reset() // 重置表单
        location.href = './login.html' // 跳转到登录页
      }
    })
  </script>
</body>

</html>